<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }
        html,body,#app{ 
            height: 100%;
        }
        #app{
             display: flex;
            flex-direction: column;
        }
        header{
            width: 100%;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: rgb(255, 214, 221);
        }
        main{
            flex: 1;
            overflow-y: scroll;
        }
        dl{
            width: 100px;
            height: 150px;
            display: flex;
            align-items: center;
            padding: 0 10px;
        }
        dl img{
            margin: 0 10px;
        }
        
        dl button{
            width: 20px;
            height: 20px;
        }
        footer{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 60px;
            background-color: rgb(185, 255, 255);
        }
        footer p{
            flex: 1;
            padding: 0 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <header>购物车</header>
        <main>
            <dl v-for="item in list">
                <input type="checkbox" v-model="item.checked">
                <img :src="item.img" alt="">
                <div>
                    <h3>{{item.text}}</h3>
                    <p>
                        <b>单价:￥{{item.price}}</b>
                        <b>总价:￥{{item.price*item.num}}</b>
                    </p>
                    <div>
                        <button :disabled="item.num<=1" @click="reducenum(item)">-</button>
                        <input type="text" v-model="item.num">
                        <button @click="item.num++">+</button>
                    </div>
                </div>
            </dl>
        </main>
        <footer>
            <input type="checkbox" v-model="allCheck" @change="allCheckFn">
            <label>全选</label>
            <p>合计：{{totalPrice}}</p>
            <button :disabled="!btnDisable">去结算{{totalNum}}</button>
        </footer>
    </div>

    <script src="./vue.js"></script>
    <script src="./mock.js"></script>
    <script>

        const data=Mock.mock({
            "list|5":[{
                img:"@image(100X100,@color)",
                text:"@ctitle",
                id:"@id",
                num:1,
                "price|10-100":0,
                checked:false
            }]
        })

        const vue=new Vue({
            el:"#app",
            data:{
                list:data.list,
                text:'',
                allCheck:false,
                totalPrice:0,
                totalNum:0,
                btnDisable:false,
            },
            methods:{
                reducenum(item){
                    item.num--
                    if(item.num<1)
                    {
                        item.num=1
                    }
                },
                allCheckFn(e)
                {
                    this.list.forEach((item) => {
                        item.checked=this.allCheck
                    })
                }
            },
            watch:{
                //text是data里的数据
                //后面的函数是监视器
                text:function (newValue,oldValue)
                {

                },
                //list是嵌套结构的数据，直接监听，监听不到的数据改变
                //需要写成对象
                list:{
                    //handler是监听器
                    handler:function (newValue,oldValue)
                    {
                        //vue的bug:新旧数据看不出变化，list是引用类型的值
                        console.log(newValue,oldValue);
                        //every 如果所有都为真，返回真
                        // 如果有一个为假，返回假
                        //every计算全选按钮是否被选中
                        this.allCheck=newValue.every((v) => 
                        {
                            return v.checked    
                        })
                        this.totalPrice=0
                        this.totalNum=0
                        //用于计算总价和总数量
                        newValue.forEach((v) => {
                            if(v.checked)
                            {
                                this.totalPrice+=v.price*v.num
                                this.totalNum+=v.num
                            }
                        })
                        this.btnDisable=newValue.some((v) => {
                            return v.checked
                        })
                    },
                    deep:true
                }
            }
        })
    </script>
</body>
</html>